<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {width: 100px; height: 100px; background-color: #45dfff; position: absolute;}
	</style>

	<script src="jquery-1.10.1.min.js"></script>

	<script type="text/javascript">
	/*
		扩展插件（作为外部的一个JS文件来引用）
			$.extend() : 扩展工具方法下的插件形式  	$.

			$.fn.extend() : 扩展JQ对象下的插件形式 	$().		
	*/

		//扩展(拖拽)
		$.fn.extend({					//this == $('div')
			"drag" : function() {
				var disX = 0;
				var disY = 0;
				var that = this;			//存起来

			// $(this).mousedown(function(ev) {		//【其实感觉更应该用$(this)，毕竟mousedown不是JS的方法】
				this.mousedown(function(ev) {
					disX = ev.pageX - $(this).offset().left;		//不能直接this
					disY = ev.pageY - $(this).offset().top;

					$(document).mousemove(function(ev) {
						that.css('left', ev.pageX - disX);	//不要引号
						that.css('top', ev.pageY - disY);
					})

					$(document).mouseup(function() {
						$(this).off();
					});

					return false;
				})
			}
		});
	</script>

	<script type="text/javascript">
		$(function() {
			$('div').drag();

			console.log( $(this) )			// 得到的是一个数组 [document, context: document]
			console.log( this )				// 得到整个document对象
		})
	</script>
</head>
<body>aa
	<div></div>
</body>
</html>